<script setup lang="ts">
import Picker from "@/components/Form/Picker.vue";
import { ref, reactive } from "vue";

// 下拉选项
const arrayData = ref([
	{ text: "杭州", value: "Hangzhou" },
	{ text: "宁波", value: "Ningbo" },
	{ text: "温州", value: "Wenzhou" },
	{ text: "绍兴", value: "Shaoxing" },
	{ text: "湖州", value: "Huzhou" },
]);

// 表单数据
const formData = reactive({
	sel: "",
	normalValue: "温州",
});

// 模拟编辑回显
setTimeout(() => {
	formData.sel = "Huzhou";
}, 2000);

// 确定事件
const onConfirm = function (selectedOptions: Object) {
	console.log(selectedOptions);
};

// 表单提交
const onsubmit = function (e: Object) {
	console.log(e);
};
</script>

<template>
	<van-form @submit="onsubmit">
		<div class="padding_15">
			<div class="public_form_box">
				<div class="van-hairline--bottom">
					<picker
						v-model="formData.sel"
						name="first"
						label="招牌材质1"
						allow-clear
						required
						:rules="[{required:true,message:'此项必填'}]"
						:columns="arrayData"
						@onConfirm="onConfirm">
					</picker>
				</div>
				<picker
					v-model="formData.normalValue"
					label="招牌材质2"
					allow-clear
					vertical
					name="second"
					:columns="arrayData"></picker>
			</div>
		</div>
		<div style="margin: 16px">
			<van-button round block type="primary" native-type="submit"> 提交 </van-button>
		</div>
	</van-form>
</template>

<style lang="scss" scoped></style>
